Vue Prop

在组建基础中,我们讲解了 Prop是作为一个DOM属性绑定,而不是属性绑定,如果有不了解或不知道的读者可以阅读下前面几章的内容最后来阅读本章。

大小写

通常情况下,HTML中的属性名称是不存在大小写敏感的,所以浏览器大多都会将大写字母解释为小写字母,这也就意味着驼峰命名的方式需要使用其段横线分割的命名方式。

类型

通常的情况下,我们的Props类型都会为字符串类型,对此,Vue为我们提供了一个多种类型的选择方式,如:

ID DA
String 字符串
Number 数字
Boolean 布尔
Array 数组
Object 对象
Function 功能
Promise 承诺

对此,我们的 code 可以将之前单纯的定义属性之后,在指定其类型,如:

1
props: ['title', 'age']

改为:

1
2
3
props: {
title: String,
age: Number,

如:

1
2
3
4
5
6
7
8
9
10
11
12
<script>
Vue.component("props", {
props: {
title: String,
age: Number,
},
template: '<h1>{{title}}</h1>'
})
new Vue (
{el: '#props'}
)
</script>

传递静态和动态

当一切执行完成之后你会发现,即使我使用的是 age,但vue并没有起到什么实质性的效果,甚至还可以输入Hello,world字符串类型的数据。在这个时候,由于我们传递给 prop中是静态 Prop即:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="props">
<props age="10"></props>
</div>
<script>
Vue.component("props", {
props: {
title: String,
age: Number,
},
template: '<h1>{{age}}</h1>'
})
new Vue (
{el: '#props'}
)
</script>

如果想传递一个动态 Prop,需要使用v-bind:即v-bind的缩写来让其成为一个动态的 prop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="props">
<props :age="10"></props>
</div>
<script>
Vue.component("props", {
props: {
title: String,
age: Number,
text: [String, Number]
},
template: '<h1>{{age}}</h1>'
})
new Vue (
{el: '#props'}
)
</script>

当使用过v-bind来传递 Prop的时候,那么所有的数据都将是动态的 prop,所以 vue 也可以根据所定义的属性来进行判断 Prop数据是否符合所定义的Prop 类型

验证


除了指定 Prop 的类型之外,我们也可以使用 vue 为我们所提供的 Prop 验证,(虽然这一点有点像是 Laravel 所提供的表单验证,但在Vue中也被发挥的琳琳尽至)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
<props-component :title-data="titleData"></props-component>
</div>
<script>
var propsComponent = {
props: {
titleData: {
type: String,
required: true
}
},
template: '<h1>{{titleData}}'
};

var vm = new Vue({
components: {
'props-component':propsComponent
},
el: '#app',
data: {
}
})
</script>

在上图之中,主要来验证titleData属性是否存在数据,如果存在数据则进行显示,但如果没有数据则会在控制台中输出错误。

默认值


在通常的情况下,如果你不指定相关数据,那么将会被输出为null即空,且不可见,对于这种情况,我们可以使用 vue 所提供的default方法来设置一个组件的默认值,而默认值的数据则是其属性内的信息,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="props">
<props :age="101"></props>
<props></props>
</div>
<script>
Vue.component("props", {
props: {
age: {
type: Number,
default: 1
}
},
template: '<h1>{{age}}</h1>'
})
new Vue (
{el: '#props'}
)
</script>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

CSS mask 遮盖应用


CSS 属性中,为我们提供了一个用于遮盖的属性即mask,通过mask允许开发者通过遮盖或剪切特定的区域或图片的方式来隐藏一个元素或全部可见的区域,在目前mask属性经常被应用在弹幕之中,在 bliblibli平台内所应用。

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
html, body {
width: 100%;
height: 100%;
display: flex;
}

.text {
-webkit-mask: linear-gradient(90deg, transparent, #000);
mask: linear-gradient(90deg, transparent, #000);
}
</style>
<h1 class="text">Hello,world!</h1>

在通常的情况下并没有这么简单,上述只是简单的使用MASK来实现文字的消失效果,通常真实环境中,可能还会根据后端来生成遮盖图片,文字移动过去则触发遮盖的效果等。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

CSS 文本块溢出

单行


在 CSS 中,为我们提供了一个可用于文本溢出的元素,分别可以搭配white-space、overflow、text-overflow等元素进行进行来进行文本溢出的设置:

1
2
3
4
5
6
7
8
9
10
11
    <style>
.text {
width: 100px;
white-space: nowrap;
/* */
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="text">This text-overflow in index.html</p>
</body>

多行


可能有时候上面的需求无法满足我们的实际需要,只可以单行的显示文本,对此我们只需要加入display、-webkit-line-clamp、-webkit-box-orient来进行设置多行文本的溢出效果,主要通过-webkit-line-clamp来设置一个夹子,然后通过-webkit-box-orient中在盒子模型内的右侧设置一个垂直的效果即可实现:

1
2
3
4
5
6
7
8
9
10
11
12
    <style>
.text {
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<p class="text">This text-overflow in index.html</p>
</body>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Vue 组件注册

组建名

关于 Vue 的组建名特别是全局组件的注册格式:

1
2
3
Vue.component('components-name', {
// ……
})

其中在全局组件注册中第一个参数是全局组件的名称,而第二参数则为组件中的code

组件名的命名方式

组建名的定义主要命名方式为 kebab-case即“短横线分割命名方法”还有驼峰式命名,他们的命名方式主要体现在:

1
2
3
Vue.component("component-name", {
// ……
})

以及驼峰式命名方法:

1
2
Vue.component("componentName" , {
})

短横线命名以及驼峰式命名主要区分在component-namecomponentName,通常使用短横线明明更加的明显但在一些语言中并不支持,所以驼峰式命名方法受众更多。

在官方文档中,虽然短横线分割以及驼峰式命名方式都会被接受,但是直接在DOM中使用时只支持以短横线分割Kebab-case是有效的

全局注册与局部注册

全局注册

通过全局注册通常会使用Vue.component来创建一个全局组件即:

1
2
3
Vue.component('component-name', {
// ……
})

在他们注册之后可以用在任何新的Vue实例中,就比如:

1
2
3
4
5
6
7
8
9
10
Vue.component('componente-one', {
// ……
})
Vue.component('componente-two', {
// …… code
})

new Vue ({
el: '#app'
})

之后可以可以用过使用下放实例直接使用刚刚所注册的全局组件:

1
2
3
4
<div id="id">
<componente-one></componente-one>
<componente-two></componente-two>
</div>

局部注册


全局注册通常往往都不会是太于理想的,如果你有很多的组件,但是你用到的只有那一两个,则会造成很多的代码行数增加(经管全局注册的初始结构会比局部注册的少几行),通过局部注册,即有多少,注册多少,但全局注册则是尽管来,趁热,来者不惧的的方式进行组件的注册。通过上述的对比我们可以更快的理解全局注册与局部注册相互之间的差异以及区别,读者可根据在开发项目中时自行进行使用两种方法来构建一个项目。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

树莓派 PRI 显示屏 驱动安装问题解决

就在昨天我刚刚收到了期盼已久的 Respberry Pi 4 Computer Model B 2GB RAM,由于刚刚到手稍微看了下,自带的软件实在是太多我不需要的,在通常情况下我主要使用(在树莓派中),Python、Java、shell等语言来开发一些工具,当然由于树莓派是2G的,我不可能继续使用他所预装的系统,因为实在是感觉有点没什么用处。。。

在第二天我准备将树莓派重装为Raspberry Pi OS Lite即精简版系统,可以通过https://www.raspberrypi.org/software/operating-systems/ 来进行选择你想要的,当然你也可以通过树莓派所提供的官方GUI程序帮你完成,这通常会非常的慢(由于貌似好像大厂要抢用户了,最近迅雷的UI以及下载速度特便快,推荐迅雷下载镜像)。

当一切完成之后通电正常情况下会显示白屏,如果你等待个5~7分钟还没有得到解决那么我们可以直接通过安装驱动来解决这个问题

显示屏参数
本文以 3.5 PRI Display为例,在此之前你需要保证树莓派可以进行联网以及安装了git和处于 shell连接下进行,这通常有很多文章可以帮助你解决这个问题(也会告诉你树莓派的默认密码以及帐号)

当这一切结束的了,我们可以通过下述 命令 来安装 LCD 驱动:

1
2
3
4
5
6
cd
sudo rm -rf LCD-show
git clone https://github.com/goodtft/LCD-show.git
chmod -R 755 LCD-show
cd LCD-show/
sudo ./LCD35-show

驱动安装完成效果
当上述 命令执行完成时则表示 LCD 驱动安装完成,当完成之后 树莓派会进行重新启动,这个时候只需要等待个及分钟既可以得到显示。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

D3 选择集与数据

选择集与数据通常被称之为数据绑定(Data-Join)也是D3的核心知识之一,被称之为Data-Driven主要原因是共解决了两个问题,分别为根据数据添加元素以及当数据发生更新时,来修改元素等

选择元素与修改元素

选择元素

D3可通过使用d3.selectd3.selectAll来进行选择,通常d3.select来选择地一个匹配的元素,而d3.selectAll来匹配所有元素,就比如:

ID DA
d3.select(“body”) 选择 body元素
d3.select(“#node”) 选择 id为 node的元素
d3.select(“.class”) 选择类为 class 的地一个元素

如果说通过上述的表格无法更加直观理解的话,也许下面的这个例子会让你更加的生动形象以及感觉到他的作用,如:

1
d3.selectAll("ui ll");

修改元素


选择元素与修改元素的区别主要在于选择元素是d3.select、d3.selectAll而修改元素则是当选择后,在进行修改的,如:

1
2
var svg = d3.select("body")
.style('fill','red')

就比如上述的codo先选择一个body元素,之后通过.style来修改元素的颜色为red,在d3.js中,修改元素共有6个,分别为:

ID DA FA
.style 修改style元素 d3.selectAll('client').style('fill','red')
.attr 更新一个属性 d3.selectAll('client').attr('cx',"50px")
.classed 添加或移除一个属性 d3.select('.client').classed('checked',true)
.property 更新元素中的属性 d3.selectAll('client').property('checked',false)
.text 更新文本中的内容 d3.select('div.title').text('Hello,d3')
.html 更新或增加html内容 d3.select('.legend').html('<div>hello,d3</div')

设定以及获取属性

select 与 selectAll

ID DA FA
select 选择单个元素
selectAll 选择全部元素

classed

1
2
3
4
5
6
7
8
9
10
11
12
<p id="title">This is D3.js</p>
<p id="data">This data</p>
<style>
.colorRed {
color: red;
}
</style>
<script>
d3.select("p")
.attr('id','title')
.classed('colorRed',true);
</script>

.classed可以设置选择集的class类,如果有多个css类需要选择可以通过使用.classed('colorRed font',true);
来进行实现,其中true以及false分别是使用或不使用该类,通俗点就是true是使用,false是不使用。当然除此之外我们也可以使用一个万能修改元素attr,即:

1
2
3
d3.select("p")
.attr('id','title')
.attr('class','colorRed font')

都可实现与:

1
2
3
d3.select("p")
.attr('id','title')
.classed('colorRed',true);

style

不仅仅支持class,修改元素中依然还支持style属性的设置,通常我们可以使用:

1
2
3
d3.select("p")
.attr('id','title')
.style('color','red');

来进行设置,但此时就会有读者发现,要如何设置多条css语句?,通常我们可以通过多个css写在一起来实现:

1
2
3
4
d3.select("p")
.attr('id','title')
.style({"color":"red",
"font-size":"20px"});

上述的code同等于<p id="title" style="color: red; font-size: 20px;">This is D3.js</p>

property

```元素在```d3```中主要用于**更新元素中的属性**,如:
1
2
3
4
5
6
```js
<input id="input" type="text" name="inputname" />
<script>
d3.select("#input")
.property("value","Hello");
</script>

也就是说表单并不存在value值,之后通过property设置了id为inputvalueHello,所以我们可以通过使用.property("value","Hello"),来设置inputvalue值,当然也不仅仅可以设置value还可以更新input的属性为submit,如:

1
2
3
4
5
<input id="input" type="text" value="Go" name="inputname" />
<script>
d3.select("#input")
.property("type","submit");
</script>

上述的code与更新value一样,只不过更新的type不一样,inputtext更新为submit为按钮类型。

text

is d3.js”之后被```d3.select("p")```所进行获取,在修改```text```数据为```Hello,d3.js```:
1
2
3
4
5
6
7
```js
<p>This is d3.js</p>
<script>
d3.select("p")
.text('Hello,d3.js')
</script>
</body>

html

1
2
3
4
5
6
7

```js+html
<p>This is d3.js</p>
<script>
d3.select("body")
.html('<h1>Hello,html</h1>')
</script>

如上述的code则是更新/修改body元素内的信息,并修改为Hello,html

添加插入和删除(append、insert、remove)


选择集可以支持添加和删除以及插入信息,主要通过append、insert、remove来完成上述操作:

1
2
3
4
5
6
7
8
9
10
11
12
<p>Vue</p>
<p id="ejs">Ejs</p>
<p>Laravel</p>

<script>
var body = d3.select("body")
body.append("p").text("D3")
body.insert("p","#ejs").text('Less')

var ejs = d3.select("#ejs")
ejs.remove()
</script>

数据绑定

数据绑定即Data-Join,数据选择以及数据绑定通常是一起的,所谓数据绑定即将数据绑定到DOM中,网页中的数据可以和元素绑定到一起,之后可以进行更改并操作元素会非常的方便,也是D3处理选择集数据的方法,在默认的情况下d3.select以及d3.selectAll是不存在数据的,所以通过数据绑定就可以使得拥有数据,通常可以使用selection.datum以及selection.data,他们的作用是:

ID DA
selection.datum 绑定一个数据到选择集中
selection.data 绑定一个数组到选择集上,数组各项值与选择集的各个元素进行绑定

datum()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

```html+js
<body>
<p>Vue</p>
<p>Ejs</p>
<p>Laravel</p>

<script>
var p = d3.select("body")
.selectAll("p");
p.datum('good');
console.log(
p.datum()
);
</script>
</body>


将 “body” 元素内的所有"p"标签,绑定数据到 “good”中,datum() 绑定了一个字符串到”good”选择集中,调用text()中的无名参数 “function(d,i)”,其中 d = data、而 i d = index,即数据与索引,之后无名函数返回了由 “d”以及”i”所结合的字符串,最终所绑定的数据被替换为了 “共有”……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
<p>Vue</p>
<p>Ejs</p>
<p>Laravel</p>

<script>
var p = d3.select("body")
.selectAll("p");
p.datum('good')
.text(function(d,i) {
return d = "共有: " + i + " 个数据";
});
</script>
</body>

在d3.js中,我们可以使用一个被绑定的数据传递给子元素,即使用append方法即可实现,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
<p>Vue</p>
<p>Ejs</p>
<p>Laravel</p>

<script>
var p = d3.select("body")
.selectAll("p");
p.datum('is good!')
.append("good")
.text(function(d,i) {
return " " + d;
});
</script>

之后所输出的信息将会为:

1
2
3
4
5
Vue is good!

Ejs is good!

Laravel is good!

通过console.log在控制台内输出,被绑定的数据选择集添加后,新元素也会被继承

1
2
__data__: "is good!"
__proto__: HTMLParagraphElement

data()

selection.data 用来绑定一个数组到选择集上,数组各项值与选择集的各个元素进行绑定 data()
还提供了一个当数组的长度与元素的数量不一致的时候的处理方案即Data-Join

ID DA
数组长度 > 元素数量 为多余数据预留元素位置,用于将来插入新的元素
数组长度 < 元素数量 获取多余的元素位置,用于将来的删除

通常用于处理上述的方法被d3称之为Data-Join即数据连接,Data-join主要的三个关键词就是Update、Enter、Exit起大致意思为更新、进入、退出三个其作用是:

ID DA
Update 即存在的元素,可以进行修改
Enter 代表已经丢失的元素,可以修改这些元素的属性
Exit 指多余的元素,可以进行删除

当我们了解到 data()以及data-Join之后,将会来定义一个data()方法的数据绑定:

1
2
3
4
5
6
7
8
9
10
11
12
<p>Vue</p>
<p>Ejs</p>
<p>Laravel</p>

<script>
var dataset = [1,2,3];
var p = d3.select("body")
.selectAll("p");

var update = p.data(dataset);
console.log(update);
</script>

通过上述的code中,主要使用了var dataset = [1,2,3];来定义数组的1,2,3并对应了Vue、Ejs、Laravel等元素并进行绑定,并最终通过console.log来输出绑定的结果。

Update、Enter、Exit


通常,数组长度与元素长度相等的情况较少,通常并不为相等,这就会导致数组长度为3,元素长度为5,或数组长度为3,元素长度为5的这种问题,所以引入了Update、enter、exit的概念来解决这个问题,他们的直接意思可以为:

ID DA FA
Enter 如果数组长度大于元素的数量,则部分不存在的元素将即将进入可视化状态 给选择集足够的元素
Exit 如果数组长度小于元素数量,多余的元素将会进入即将进入退出可视状态 删除多余的元素
Update 如果数组长度等于元素的树立那个,则绑定数据的元素即将被更新 修改或更新


通过上图我们可以发现,当数组大于元素时,D3为多余的数组预留了一个空位,以为后来的数据做准备。而当数组小于元素的时候,超过的数组将不会被数据进行绑定。

绑定的顺序


默认的情况下data()是按照索引号来进行绑定的,就比如,第0个元素绑定数组第0项……,通常data()的一个参数是被绑定的数据,而第二个则是键值,使用此方法即可改变绑定的顺序,但通常使用此方法之后会更改其默认的绑定方式,是的其通过键值依次对应的方式来改变:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p></p>
<p></p>
<p></p>

<script>
var dataset = [
{id:1 , name:"Ejs"},
{id:2 , name:"Vue"},
{id:3 , name:"Laravel"}
];
var p = d3.select("body").selectAll("p");

p.data(dataset)
.text(function(d) {
return d.id + "." + d.name;
});

dataset = [
{ id:1, name:"d3.js"},
{ id:3, name:"Less"}
];
p.data(dataset, function(d) {
return d.id;
})
.text(function(d) {
return d.id + "." + d.name;
})
</script>

首先我们定义了三个空的元素,并也相应的建立了三个数组,符合了update的更新及修改的条件,之后听过再次定义dataset来根据键值进行修改或更新信息,最终的出的结果将是:

1
2
3
1.d3.js
2.vue
3.Less

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

D3 基础

D3(Data-Driven Document)即数据驱动文档,是一个主要用于数据可视化所开发的javascript库,启动主要是数据决定绘图流程以及程序设计模型。或者另一个称呼为“事件驱动 ——由用户动作来决定程序流程的设计模型”。在版本控制中,D3主要使用了语义话版本控制,格式为主板本号.次版本号.修订号 即:

  1. 主版本号:做了不兼容的API修改
  2. 次版本号:当你做了向下兼容的功能增加
  3. 修订号:当你做了向下兼容的问题修正。

数据与DOM的绑定

同样的,在WEB中数据可视化中不仅仅只有D3,还有不少的类似与:Highcharts、Echarts、Chart。当然除此之外还有维度更高的,如蚂蚁空间地理可视化框架,D3 能够将数据与DOM对象进行绑定,使得数据与图形为一体,我们当修改DOM的时候,数据自然而然的会进行更新,这意味着我们配合各种各样的语言来呈现不同的数据展示。

计算和绘图的独立

在D3中数据变成一个数据图表将会被分为两个步骤为计算绘图,在Highcharts等框架中,计算和绘图shingle整体,并输入数据。而D3中数据与绘图是进行分开的,而计算内所做的就是计算所得到的节点或坐标绘图则是渲染图表。

支持 SVG 与 Canvas

在 D3 中,SVG与Canvas中通常会出现在不同的环境中,如地图中的飞线图,都可以使用SVG或Canvas路径以及SVG动画进行实现,在3.X之前的版本主要支持SVG,但从4.X开始也支持 Canvas。

数据可视化

数据可视化即Data Visualization,起源与18世纪,在19世纪中叶时期,数据可视化主要被运用与军事用途没来表示军队的死亡以及分布当中。而进入20世纪,由于大数据以及移动互联网的飞速发展,数据可视化也会运用在产品分析、行为分析以及数据统计等场景中。

图标的分类及用途

柱形图


柱形图是最为常见的,也是最容易理解的一个图表,使用柱形图的长短可以表示数据的大小,或者需要表现随着时间变化,数据的大小等。如果将柱形图的x或y轴进行一环,的可以得到一个横向的柱状图,也被称之为条形图

散点图


散点图使用三维数据集,将其中的二维数据分别对应到x和y轴,之后将第三维用点来作为表示。

折线图


折线图的目的与柱状图类似,适合在二维的数据集中,某一维相对另一维度的变化趋势,不哦那个的是折线图适合连续的数据,柱状图适合较为离散的数据,折线图也适用一些数量较大的数据而住装图适合少量的数据。

饼状图


饼状图可以用于表述数值的大小,缺点就是数值之间的差距不大,基本上通过饼状图的颜色以及注释来进行分辨,因此饼状图一般用于表示一个值站总体的百分比。

弦图


弦图用于表示点与点之间的联系,两点之间的连线来表示那个点具有联系以及线的粗细表示权重。

力导向图


力导向图适合描述打来那个节点之间的关系,各个节点之间具有相互的作用里来表示节点之间的用线相连,而相连的定点表示具有一定的关系,适合用于任务关系以及力导向图等。

树图


树图用于表示层级、上下级以及包含与被包含的关系,与之类似的还有集群图等。

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Vue 组件基础

创建组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="button-counts">
<button-conters></button-conters>
</div>
<script>
Vue.component('button-conters', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count += 1">增加 count {{ count }}</button>'
})
new Vue({
el: '#button-counts'
})
</script>

当创建完成组建之后,我们可以无限次的进行引用,而组件中通常会带有一个名字,就比如上述创建的组件名称就是<button-conters>并根据创建一个创建Vue根实例化将组件作为自定义元素进行使用

1
2
3
new Vue({
el: '#button-counts'
})


之后直接在HTML中直接引入刚刚创建的组件即可作为HTML元素进行使用如:

1
2
3
<div id="button-counts">
<button-conters></button-conters>
</div>

复用组件


当组件创建完成之后我们可以在上述的基础上进行多次复用且独立,如:

1
2
3
4
5
6
<div id="button-counts">
<button-conters></button-conters>
<button-conters></button-conters>
<button-conters></button-conters>
<button-conters></button-conters>
</div>

当点击按钮的时候,上述的flag将会被证实,就因为每个组件都会各自独立并维护他的count,每次使用<button-conters>都会有一个新的实例会被新建。

同步


当以往常一样通过data直接定义且不通过data 函数则可返回对象的独立访问,如:

1
2
3
4
5
6
7
8
9
10
11
12
var buttonRepeat =  {
count: 0
}
Vue.component('button-conters', {
data: function() {
return buttonRepeat
},
template: '<button v-on:click="count += 1">增加 count {{ count }}</button>'
})
new Vue({
el: '#button-counts'
})


由于每个count是共享的所以当点击一个组件的同时,所有复用的组件都会被增加,所以正确的方式是通过使用独立函数进行编写组件,来不影响组件之间的复用:

1
2
3
4
5
6
7
8
9
10
11
Vue.component('button-conters', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count += 1">增加 count {{ count }}</button>'
})
new Vue({
el: '#button-counts'
})

组件的组织


通常一个应用会一一棵嵌套的组建树形式来组织,在vue当中,组件的注册需要让vue能够进行识别,所以注册主键一共分为两种类型,分别为全局注册以及局部注册,vue中所有的组件都是通过Vue.component来进行注册。

而局部注册主要通过使用var ComponentOne {}来进行注册,全局注册主要通过使用Vue.component('组件名', {})来进行注册,这里两者的区别就是命名方式的不同

全局注册组件格式

1
2
3
Vue.component('组件名称' {
// ……
})

局部注册

1
2
3
var ComponentOne = {
// ……
}

Prop 向子组件传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

![](https://gitee.com/sif_one/drawing-bed/raw/master/1615400560_20210310232123160_1093282140.png)
在官方文档中,Prop向子组件传递数据主要用于**向这个组件传递一个标题或者内容之类的展示数据**,Prop是你可以在组建上注册一些自定义的**属性**,当一个**值传递给一个 prop 属性**。

```vue
<div id="data-title">
<data-title title="Hello,world"></data-title>
<data-title title="Hello,Vue"></data-title>
</div>
<script>
Vue.component('data-title', {
props: ['title'],
template: '<h1>{{title}}</h1>'
})
new Vue({el: '#data-title'})
</script>


除此之外我们还可以使用动态赋予一个变量的值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="data-title">
<data-title
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"></data-title>
</div>
<script>
new Vue({
el: '#data-title',
data: {
posts: [
{ id: 1, title: 'Hello,world!'},
{ id: 2, title: 'Hello,Vue!'},
{ id: 3, title: 'Hello,Laravel!'},
]
}
})
Vue.component('data-title', {
props: ['title'],
template: '<h4>{{title}}</h4>'
})
new Vue({el: '#data-title'})
</script>

监听子组件事件


在开发<text-post组件的时候,就会涉及到父级组件的协调来实现一个文字的放大效果以及默认字体大小。首先我们在父组件,即#text-posts-events中添加一个postFontSize数据属性来设置默认的字号。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="text-posts-events">
<div :style="{ fontSize: postFontSize + 'em' }">
<text-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize += 0.1"
>
</text-post>
</div>
</div>
<script>
Vue.component('text-post', {
props: ['post'],
template: '\
<div class="text-post">\
<h3>{{post.title}}\
<button v-on:click="$emit(\'enlarge-text\')">\
字体放大\
</button>\
<div v-html="post.content"></div>\
</div>\
'
})
new Vue({
el: '#text-posts-events',
data: {
posts: [
{id:1, title: 'Hello,vue!', content:'vue'},
{id:2, title: 'Hello,Laravel!', content:'laravel'}
],
postFontSize: 1
}
})
</script>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Vue 表单处理

用法

vue 的表单处理主要使用v-model指令,且仅仅限制于在<input>、<select>、<textarea>等HTML表单元素中使用。v-model可以根据HTML控件的类型来自动选取正确的方法来进行更新。

需要值得注意的是v-model指令会忽略所有的表单value、checked、selected等属性的初始值,所以需在js内的data选项中声明初始值,其中元素所对应的属性对应为:

ID DA
text、textarea 使用value 属性和input 事件
checkbox 和 radio 使用 checked 属性 和 change 事件
select 将以value 作为属性并和 change 事件

input

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<input v-model="message" placeholder="输入">
<p>当前输入的是: {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 0
}
})
</script>

textarea

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model="message" placeholder="输入"></textarea>
<p class="br">当前输入的是: {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

在上述的演示当中,<p>标签是不会根据<textarea>标签中并不会进行换行,所以我们需要使用style的white-space属性。

checkbox

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<input type="checkbox" id="message" v-model="message">
<label for="message">{{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: false
}
})
</script>

复选框绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="app">
<h2>Vue</h2>
<input type="checkbox" id="vue" value="vue" v-model="message"><label>vue</label>
<input type="checkbox" id="vue" value="vue" v-model="message"><label>vue</label>
<h2>Laravel</h2>
<input type="checkbox" id="laravel" value="laravel" v-model="message"><label>laravel</label>
<h2>Less</h2>
<input type="checkbox" id="less" value="less" v-model="message"><label>less</label>
<hr/>
<br>
<label>共选择了 {{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: []
}
})
</script>

radio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
<input type="radio" id="vue" value="Vue" v-model="message">
<label for="vue">Vue</label>
<input type="radio" id="laravel" value="Laravel" v-model="message">
<label for="vue">Laravel</label>
<input type="radio" id="ejs" value="Ejs" v-model="message">
<label for="vue">Ejs</label>
<hr/>
<br>
<label>选择了 {{message}}</label>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

当单选一个radio类型的时候,将会根据其radio类型中所设置的value进行显示。

选择框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
<select v-model="message">
<option disabled value="">类型</option>
<option value="Vue 被选择了">Vue</option>
<option value="Laravel 被选择了">Laravel</option>
</select>
<p>{{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

在上述的code当中,我们主要通过使用value来设置option被选择时的属性,除此之外我们还可以直接在 vue 中更加生动的进行绑定:

value 绑定

修饰符

在 vue中,不仅仅为前面几章提供了修饰符,自然而然的也为表单处理所加入了一些较为常用的修饰符,如.lazy、.number、.trim,他们的详细用法是:

ID DA
.lazy 当输入完成时在同步信息
.number 将输入的值自动转换为 number类型
.trim 自动过滤首尾空白

.lazy


vue 所提供的.lazy修饰符的主要作用就是,当输入的时候并不会更新当前输入的内容,只有当结束输入的时候才会进行更新或同步:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model.lazy="message" placeholder="输入"></textarea>
<p class="br">当前输入的是: {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

.number

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```vue
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<input type="number" v-model.number="message" placeholder="输入"></input>
<p class="br">当前输入的是: {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

.trim

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```vue
<style>
.br {
white-space: pre-line;
}
</style>
<div id="app">
<textarea v-model.trim="message" placeholder="输入"></textarea>
<p class="br">当前输入的是: {{message}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布

Vue 事件处理

在vue当中,还提供了一个v-on指令来监听DOM事件,并使用一些鼠标、键盘方法来运行一些js code,其中我们在上面几章已经讲述了v-on指令的缩写为@,本文我们将不会重复上述关于v-on指令的信息。

鼠标左击处理 (@click \ v-on:click)

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
<button @click="click += 1">增加</button>
<p>当前增加次数为 {{click}} 次</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
click: 0
}
})
</script>

方法调用


在上述的code中,如果用于复杂逻辑处理那么会直接写上 js code 是不可行的,所以vue自然而然的为我们提供了调用方法的方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
<button v-on:click="add">Add</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
counter: 0
},
methods: {
add: function(event) {
alert("当前数据默认被点击次数" + this.counter)
if (event) {
alert("被触发元素为:" + event.target.tagName)
}
}
}
})
</script>

内链调用处理


在上述我们演示到了方法调用以及鼠标动作处理等操作,其中鼠标左击处理也是通过内链直接调用的,所谓内链就是与html 标签元素写在一起即大多数都被称之为内链

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
<button @click="echo('Hello,vue!')">Vue!</button>
<button @click="echo('Hello,hello!')">Hello!</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
echo: function(message) {
alert(message)
}
}
})
</script>

修饰符

在之前我们讲到了vue的基本事件修饰符,本文我们紧接着上述内容进行详细讲解,首先:

v-on

鼠标修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
```vue
<div id="app">
</div>
<form v-on:submit.prevent="onSubmit">
<a v-bind:href="url">Go blog</a>
</form>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'http://sif_one.gitee.io/'
}
})
</script>

那么其最后在 v-on指令的笼罩下范围内的<a>标签将会失去原本的作用:

ID DA FA
.stop 调用 event.stopPropagation() 停止传播
.prevent 调用 event.preventDefault() 防止默认
.capture 添加事件侦听器时使用capture(捕获) 模式
.self 只当事件从侦听器绑定元素本身触发时才进行回调
```.{keyCode keyAlias} ``` 只当事件从特定键触发时才进行回调
.native 监听组件根本元素的原生事件
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 只当鼠标点击右键时触发
.middle 当鼠标中键时触发
.passive 以 { passive: true } 模式添加侦听器

在上述的修饰符中,在事件处理中经常会调用到event.stopPropagation以及event.stopPropagation等方法,但由于其主要处理纯粹的数据逻辑,并不处理BOM事件的写接

于是,vue为了解决这个问题,官方为其提供了事件的修饰符:

  1. stop
  2. prevent
  3. capture
  4. salf
  5. once
  6. passive

当然vue官方文档还提供了几个修饰符的组合例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

在以上的修饰符进行组合的时候,请需要注意顺序,顺序不同可能最后表达的效果可能不一。。

不仅仅这样

众所周知,jq很多方法都需要使用鼠标事件,如鼠标单击事件,而vue 在2.2.0版本中,也增加了一个鼠标按钮修饰符:

ID DA
.left
.right
.middle

键盘修饰符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

```vue
<div id="app">
<input v-on:keyup.tab="echo">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
echo: function(message) {
alert("监听到了 tab 的键盘事件")
}
}
})
</script>


在上述的code案例中,我们主要使用tab案件码来配合键盘修饰符来监听tab的键盘事件,vue一共所支持的按键修饰符共有9个,分别为:

ID DA
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

系统修饰符

当然,vue的v-on指令还不仅仅以上这些,自然而然的还支持了系统修饰符,我们可以通过按下响应的按键触发监听器:

ID DA
.ctrl
.alt
.shift
.meta win 键 或 ⌘ 键

同样的,系统修饰符也可以进行组合,如官方文档中所提供的例子:

1
2
3
4
5
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

需要注意的是,修饰符键于常规的不同,当keyup事件一起使用的时候,修饰符键必须处于按下的状态,只有当按住tab的情况下释放其他案件,才能被触发,所以如果需要实现那种行为,可以改为键代码为keyup.17即可。

.exact
2.5.0中所新增的修饰符,可以**精确的控制系统修饰符组合并触发事件**,这里我们提供了vue的官方文档中所写的例子:
1
2
3
4
5
6
7
8
9
```vue
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

从例子中可以看到使用.exact修饰符进行系统修饰符的多种组合变得更加方便(且不用写键代码如keyup.17

本文使用《江雪分析公开知识存储库知识共享许可证》进行发布